<template>
  <div style="padding: 20px">
    <h2>验证码演示</h2>

    <div style="margin: 20px 0">
      <button
        @click="showVerify"
        style="
          padding: 10px 20px;
          margin-right: 10px;
          background: #007bff;
          color: white;
          border: none;
          border-radius: 4px;
          cursor: pointer;
        "
      >
        显示验证码
      </button>
      <button
        @click="refreshVerify"
        style="
          padding: 10px 20px;
          background: #28a745;
          color: white;
          border: none;
          border-radius: 4px;
          cursor: pointer;
        "
      >
        刷新验证码
      </button>
    </div>

    <div style="margin: 12px 0">
      <button @click="switchToSlider">切换为滑块</button>
      <button style="margin-left: 8px" @click="switchToClickWord">切换为点选</button>
      <span style="margin-left: 12px; color: #555">当前类型：{{ type }}</span>
    </div>

    <div
      v-if="result"
      style="margin: 10px 0; padding: 10px; border-radius: 4px"
      :style="{
        background: result.success ? '#d4edda' : '#f8d7da',
        color: result.success ? '#155724' : '#721c24',
      }"
    >
      {{ result.message }}
    </div>

    <Verify ref="verifyRef" :captcha-type="type" mode="pop" @success="onSuccess" @error="onError" />
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import Verify from '@/components/common/verifyCode/Verify.vue'

const verifyRef = ref<any>()
const result = ref<{ success: boolean; message: string } | null>(null)
const type = ref<'blockPuzzle' | 'clickWord'>('blockPuzzle')

// 显示验证码
const showVerify = () => {
  result.value = null
  verifyRef.value?.show?.()
}

// 刷新验证码
const refreshVerify = () => {
  result.value = null
  verifyRef.value?.refresh?.()
}

function switchToSlider() {
  type.value = 'blockPuzzle'
  verifyRef.value?.refresh?.()
}
function switchToClickWord() {
  type.value = 'clickWord'
  verifyRef.value?.refresh?.()
}

// 处理验证成功
const onSuccess = (data: any) => {
  console.log('验证成功:', data?.captchaVerification)
  result.value = { success: true, message: '验证成功！' }
}

// 处理验证失败
const onError = (error: any) => {
  console.log('验证失败:', error)
  result.value = { success: false, message: '验证失败，请重试' }
}
</script>
